<template>
  <div class="table-wrapper" :style="cssVars">
    <table class="table-class-common">
      <thead><tr><th>Header</th></tr></thead>
      <tbody>
      <tr v-for="row in data" :key="row.id">
        <td>{{ row.text }}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const evenColor = ref('#2c3e50');
const oddColor = ref('honeydew');

const cssVars = computed(() => ({
  '--even-color': evenColor.value,
  '--odd-color': oddColor.value
}));
</script>

<style scoped>
:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}

</style>